<template>
  <div>
    <el-tag
        v-for="(item,index) in tags"
        :key="item.label"
        :closable="item.name !== 'home'"
        :effect="$route.name === item.name ? 'dark' : 'plain'"
        @click="changeMenu(item)"
        @close="handleMenu(item,index)"
        size="small"
    >
        {{ item.label }}
    </el-tag>   
  </div>
</template>

<script>
import{mapState,mapMutations} from 'vuex'
export default {
    name:'CommonTags',
    data(){
        return {
            tempItem:{}
        }
    },
    computed:{
        ...mapState({
            tags:state => state.tab.tabsList
        })
    },
    methods:{
        ...mapMutations({closeTag:'CLOSE_TAGS'}),

        changeMenu(item){
            if(this.tempItem !== item){
                this.tempItem = item
                this.$router.push({name:item.name})
            }
        },
        handleMenu(item,index){
            const lastIndex = this.tags.length -1
            this.closeTag(item)
            if(item.name !== this.$route.name){
                return 
            }else if(index === lastIndex){
                this.$router.push({ name:this.tags[index-1].name })
            }
            /* else{
                this.$router.push({ name:this.tags[index].name })
            } */
        },
    },
    mounted(){
        //console.log(this.$route,'//');
    }
    
}
</script>

<style lang="less">
.el-tag{
    margin-left: 10px;
    cursor: pointer;
}
</style>